<script setup>
import useDetailStore from '@/stores/modules/detail'
import { storeToRefs } from 'pinia'

// 获取轮播图数据
const detailStore = useDetailStore()
const { getHousePicture } = storeToRefs(detailStore)
</script>

<template>
  <div class="detail-swipe">
    <van-swipe class="swipe" :autoplay="3000" indicator-color="white" lazy-render>
      <template v-for="(item, index) in getHousePicture?.housePics" :key="index">
        <van-swipe-item class="swipe-item">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <img style="width: 15px" src="@/assets/img/home/zhaopian_pic.png" alt="" />
          {{ active + 1 }}/{{ total }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style lang="less" scoped>
.detail-swipe {
  .swipe {
    position: relative;
    background-color: #fff;

    .swipe-item {
      img {
        height: 250px;
      }
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
}
</style>
